<script setup lang="ts">
import { getIntro, getShowDays, getSelectItem, getSelectCinemas } from '@/api/index'
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

// 在pinia 获取城市
const counterStore = useCounterStore()
const { cityId, latitude, longitude } = storeToRefs(counterStore)

// 影片介绍（购票页面简介）
const movieIntro = ref(null)
getIntro(route.query.movieId).then(res => {
    // console.log(res.data.data.movie);
    movieIntro.value = res.data.data.movie
})

// 上映日期
const tabActive = ref(0)
// 当前日期
const day = ref(new Date().toLocaleDateString().replace(/\//g, '-'))
// const movieId = ref()


const ShowDays = ref(null)
getShowDays(route.query.movieId, cityId.value).then(res => {
    console.log(res.data.data.dates);
    ShowDays.value = res.data.data.dates

})
// 获取当前日期
const getDate = () => {
    day.value = ShowDays.value[tabActive.value].date
    // console.log(tabActive.value);
}

// 影片上映影院筛选条件
// 区域
const active = ref(0)
const sidebarActive = ref(0)

const district = ref([])
const subway = ref([])
const districtIndex = ref(0)
const subwayIndex = ref(0)
const filterDis = ref(-1)
// 品牌
const brand = ref([])
const filterBrand = ref(-1)
// 特色
const filterService = ref(-1)
const service = ref([])
const timeRanges = ref([])
const filterTimeRanges = ref(100000000)

// 重置
const reset = () => {
    //   filterHallType.value = -1
    filterService.value = -1
}
// 提交
const submit = () => {
    getSelectCinemas(day.value, route.query.movieId, cityId.value, latitude.value, longitude.value, filterDis.value, filterBrand.value, filterService.value).then(res => {
        console.log(res.data.data?.cinemas);
        cinemaList.value = res.data.data.cinemas
    })
}

// 获取筛选条件
const SelectItems = ref(null)
getSelectItem(route.query.movieId, cityId.value, day.value).then(res => {
    // console.log(res.data.data);
    SelectItems.value = res.data.data
    district.value = res.data.data.district.subItems.map((item) => {
        return { count: item.count, value: item.id, text: item.name, subItems: item.subItems }
    })
    subway.value = res.data.data.subway.subItems.map((item) => {
        return { count: item.count, value: item.id, text: item.name, subItems: item.subItems }
    })
    brand.value = res.data.data.brand.subItems.map((item) => {
        return { count: item.count, value: item.id, text: item.name, subItems: item.subItems }
    })
    service.value = res.data.data.service.subItems.map((item) => {
        return { count: item.count, value: item.id, text: item.name, subItems: item.subItems }
    })
    timeRanges.value = res.data.data.timeRanges.subItems.map((item) => {
        return { count: item.count, value: item.id, text: item.name, subItems: item.subItems }
    })
})

// 筛选后的影院
const cinemaList = ref(null)
getSelectCinemas(day.value, route.query.movieId, cityId.value, latitude.value, longitude.value, filterDis.value, filterBrand.value, filterService.value).then(res => {
    console.log(res.data.data?.cinemas);
    cinemaList.value = res.data.data.cinemas
})

watch([day, filterDis, filterBrand], () => {
    getSelectCinemas(day.value, route.query.movieId, cityId.value, latitude.value, longitude.value, filterDis.value, filterBrand.value, filterService.value).then(res => {
        console.log(res.data.data?.cinemas);
        cinemaList.value = res.data.data.cinemas
    })
})

const router = useRouter()
function ToCinema(id) {
    router.push({ path: '/cinemaDetails', query: { id: id, movieId: route.query.movieId } })
}
</script>

<template>
    <div v-if="movieIntro">
        <header v-if="movieIntro" :style="{ background: `url(${movieIntro.img})` }">
            <div class="back"><van-icon name="arrow" @click="$router.back()" size="20rem" /></div>
            <div class="info">
                <img :src="movieIntro.img" alt="">
                <div class="content">
                    <div class="nm text-ellipsis">{{ movieIntro.nm }}</div>
                    <div class="enm text-ellipsis">{{ movieIntro.enm }}</div>
                    <div class="score">{{ movieIntro.sc }}<span>({{ movieIntro.snum }}人评)</span></div>
                    <div class="text">{{ movieIntro.cat }}</div>
                    <div class="text">{{ movieIntro.src }} / {{ movieIntro.dur }}</div>
                    <div class="text">{{ movieIntro.pubDesc }}</div>
                </div>
            </div>
        </header>
        <!-- 上映日期 -->
        <van-tabs v-model:active="tabActive" @click-tab="getDate()">
            <van-tab v-for="item in ShowDays" :title="item.date">
            </van-tab>
        </van-tabs>
        <!-- 筛选条件 -->
        <van-dropdown-menu active-color="#ee0a24">
            <van-dropdown-item title="全城" class="cinemaService">
                <van-tabs v-model:active="active" animated>
                    <van-tab v-for="tab in ['商圈', '地铁站']" :title="tab">
                        <template v-if="active === 0">
                            <div style="display: flex; height: 380rem; overflow: scroll">
                                <van-sidebar v-model="sidebarActive">
                                    <van-sidebar-item v-for="(item, index) in district" :title="item.text"
                                        @click="districtIndex = index" />
                                </van-sidebar>
                                <ul>
                                    <li v-for="item in district[districtIndex].subItems" @click="filterDis = item.id"
                                        :class="item.id === filterDis ? 'active' : ''">
                                        <p>{{ item.name }}</p>
                                        <p>{{ item.count }}</p>
                                    </li>
                                </ul>
                            </div>
                        </template>

                        <template v-if="active === 1">
                            <div style="display: flex; height: 380rem; overflow: scroll">
                                <van-sidebar v-model="sidebarActive">
                                    <van-sidebar-item v-for="(item, index) in subway" :title="item.text"
                                        @click="subwayIndex = index" />
                                </van-sidebar>
                                <ul>
                                    <li v-for="item in subway[subwayIndex].subItems" @click="filterDis = item.id"
                                        :class="item.id === filterDis ? 'active' : ''">
                                        <p>{{ item.name }}</p>
                                        <p>{{ item.count }}</p>
                                    </li>
                                </ul>
                            </div>
                        </template>
                    </van-tab>
                </van-tabs>
            </van-dropdown-item>
            <van-dropdown-item v-model="filterBrand" :options="brand" />
            <van-dropdown-item title="筛选" class="cinemaService">
                <div class="title">影院服务</div>
                <div class="box" style="height: auto">
                    <div v-for="item in service" :key="item.value" class="item text-ellipsis"
                        :class="filterService === item.value ? 'active' : ''" @click="filterService = item.value">
                        {{ item.text }}
                    </div>
                </div>
                <div class="title">时段</div>
                <div class="box">
                    <div v-for="item in timeRanges" :key="item.value" class="item text-ellipsis"
                        :class="filterTimeRanges === item.value ? 'active' : ''" @click="filterTimeRanges = item.value">
                        {{ item.text }}
                    </div>
                </div>
                <div style="padding: 16rem; display: flex; justify-content: space-between">
                    <van-button color="#ccc" plain style="width: 88rem; height: 36rem" @click="reset">重置</van-button>
                    <van-button color="#e54847" style="width: 88rem; height: 36rem" @click="submit">确认</van-button>
                </div>
            </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 影院 -->
        <div class="cinema" v-for="cinema in cinemaList" :key="cinema.id" @click="ToCinema(cinema.id)">
            <div class="title text-ellipsis">
                <h4 class="text-ellipsis">{{ cinema.name }}</h4>
                <p class="text-ellipsis">
                    {{ cinema.sellPrice }} <span>元起</span>
                </p>
            </div>
            <div class="location" style="display: flex;justify-content: space-between;">
                <p class="text-ellipsis" style="width: 90%;">{{ cinema.addr }}</p>
                <p>{{ cinema.distance }}</p>
            </div>
            <div class="services">
                <div class="item" :style="{ color: service.color, borderColor: service.color }"
                    v-for="(service, index) in cinema.labels" :key="index">
                    {{ service.name }}
                </div>
            </div>
            <p class="showTimes">{{ cinema.showTimes }}</p>
        </div>
    </div>
</template>

<style lang="less" scoped>
header {
    padding: 20rem 0;
    position: relative;
    color: #fff;
    z-index: 1;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(40px);
        z-index: -1;
    }

    .back {
        position: absolute;
        right: 16rem;
        top: 50%;
    }

    .info {
        display: flex;

        img {
            width: 96rem;
            height: 150rem;
            padding-left: 20rem;
        }
    }

    .content {
        width: 221rem;
        padding-left: 10rem;

        .nm {
            width: 100%;
            font-size: 20rem;
            font-weight: bold;
        }

        .nem {
            font-size: 12rem;
            margin-top: 8rem;
        }

        .score {
            font-size: 18rem;
            color: #FFCC00;
            margin-top: 6rem;

            span {
                font-size: 12rem;
                margin-left: 4rem;
                color: #fff;
            }
        }

        .text {
            font-size: 12rem;
            margin-top: 5rem;
        }
    }
}

.cinemaService {
    .title {
        font-size: 16rem;
        margin: 10rem 6rem;
        color: #777777;
    }

    .box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 140rem;
        overflow: auto;

        .item {
            font-size: 10rem;
            padding: 12rem 0;
            border: 0.5px solid #ccc;
            color: #777777;
            border-radius: 4rem;
            width: 22%;
            text-align: center;
            margin: 4rem;
        }

        .active {
            background: #fcf0f0;
            color: #f03d37;
            border: 0.02rem solid #f03d37;
        }
    }

    ul {
        overflow: scroll;

        li {
            padding: 14rem;
            font-size: 14rem;
            width: 64vw;
            display: flex;
            justify-content: space-between;
            color: #777777;

            p {
                margin: 0;
            }
        }

        .active {
            color: #e54847;
        }
    }
}

.cinema {
    padding: 14rem;
    border-bottom: 1px solid #0000000d;
    background-color: #fff;

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        h4 {
            font-size: 16rem;
            font-weight: 400;
            margin: 0;
            width: 60%;
        }

        p {
            color: #e54847;
            font-size: 17rem;
            margin: 0;
            font-weight: 600;
            margin-left: 4rem;

            span {
                font-size: 14rem;
            }
        }
    }

    .location {
        color: #767676;
        font-size: 14rem;
    }

    .services {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .item {
            padding: 4rem;
            margin-right: 6rem;
            font-size: 10rem;
            border: 0.5rem solid #589daf;
            border-radius: 4rem;
            color: #589daf;
            margin-bottom: 4rem;
        }

        .goods {
            border: 0.5rem solid #f90;
            color: #f90;
        }
    }

    .showTimes {
        margin: 8rem 0;
        font-size: 12rem;
        color: #999;
    }
}

:deep(.van-sidebar-item--select:before) {
    background-color: #e54847;
}

:deep(.van-sidebar) {
    width: 106rem;
}

.text-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
</style>